 <style>

        .background-item {
            padding: 15px;
            background: #efefef;
        }

        .background-item thead tr {
            background: #e0e0e0
        }

        .price-input-td {
            padding: 0 !important;
        }

        .price-input-td:before {
            margin: 4px;
            width: 35px;
            height: 22px;
            content: "金额";
            line-height: 20px;
            text-align: center;
            position: absolute;
            background: #e2e2e2;
        }

        .price-input-td input {
            height: 30px;
            padding-left: 50px;
            border: none !important;
        }
    </style>

    <div class="layui-card">
        <div id="app" class="layui-card-body">
            <form id="goodsForm"  autocomplete="off" onsubmit="return false;" action="/shop/goods/ajax_add" method="post" class="form-horizontal layui-form padding-top-20 ng-pristine ng-valid ng-scope" >
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">栏目</label>
                    <div class="col-sm-8">
                        <select  title="请选择栏目"  class="layui-select full-width block" name="columnId"   v-model="columnId">
                            <!---->
                            <option value="">请选择</option>
                            <option :value="column.id" v-for="column in columns">{{column.name}}</option>
                            <!---->
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品品牌</label>
                    <div class="col-sm-8">
                        <select required title="请选择品牌"  class="layui-select full-width block" name="brandId"   v-model="brandId">
                            <!---->
                            <option value="">请选择</option>
                            <option :value="brand.id" v-for="brand in brands">{{brand.name}}</option>
                            <!---->
                        </select>
                    </div>
                </div>
                <!---->
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品分类</label>
                    <div class="col-sm-8 text-top">
                        <select required title="请选择分类" class="layui-select full-width block" name="classifyId" v-model="classifyId">
                            <option value="">请选择</option>
                            <option :value="classify.id" v-for="classify in classifies" value="{{classify.id}}">{{classify.name}}</option>
                        </select>
                    </div>
                </div>
                <!---->

                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品名称</label>
                    <div class="col-sm-8">
                        <input name="name" v-model="name" required class="layui-input" title="请输入商品名称" placeholder="请输入商品名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品图片</label>
                    <div class="col-sm-8">
                        <table class="layui-table background-item margin-none" lay-size="sm" lay-skin="nob">
                            <thead>
                            <tr>
                                <td>商品LOGO</td>
                                <td>商品图片</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-top" style="width:100px">
                                    <input type="hidden" v-model="thumbnail" name="thumbnail"/>
                                </td>
                                <td class="text-top">
                                    <input type="hidden" v-model="pics"  name="pics" />
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 普通商品及积分商品 开始 -->
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品规格</label>
                    <div class="col-sm-8">
                        <select  title="请选择规格" class="layui-select full-width block" name="specId" @change="getSpec(specId)" v-model="specId">
                            <option value="">默认规格</option>
                            <option :value="spec.id" v-for="spec in specs" value="{{spec.id}}">{{spec.name}}</option>
                        </select>
                        <table class="layui-table notevent">
                            <tr>
                                <th>可选规格</th>
                                <th>规格内容</th>
                            </tr>
                            <tr  v-for="option in options">
                                <td>{{option.name}}</td>
                                <td>
                                    <label v-for="item in option.values"  class="nowrap margin-right-10 line-height-18">
                                        <input  class="inline-block" type="checkbox" v-model="item.active"   :value="item.name" @change="selectName(option,item.name,$event)">
                                        <span>{{item.name}}</span>
                                    </label>
                                </td>
                            </tr>
                        </table>
                        <table class="layui-table notevent" lay-size="sm">
                            <thead>
                            <tr>
                                <th>商品规格</th>
                                <th>市场价格</th>
                                <th>销售价格</th>
                                <th>规格状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="result in results" class="ng-scope">
                                <td class="nowrap">
                                    <span v-for="attr in result.name"  >
                                        {{attr}}
                                    </span>
                                </td>
                                <td class="price-input-td">
                                    <input v-model="result.marketPrice" onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input" placeholder="0.00"  >
                                </td>
                                <td class="price-input-td">
                                    <input v-model="result.salePrice" onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input" placeholder="0.00" n>
                                </td>
                                <td>
                                    <label class="nowrap line-height-18">
                                        <input v-model="result.choose"  class="inline-block ng-pristine ng-untouched ng-valid ng-not-empty" type="checkbox"> 启用
                                    </label>
                                </td>
                            </tr>
                            <tr v-if="results.length==0" class="ng-scope">
                                <td class="nowrap">
                                    <span  class="ng-scope">
                                    <span class="layui-badge layui-bg-blue ng-binding" >默认规格</span>
                                </span>
                                </td>
                                <td class="price-input-td">
                                    <input id="marketPrice"   class="layui-input" placeholder="0.00"  >
                                </td>
                                <td class="price-input-td">
                                    <input id="salePrice"   class="layui-input" placeholder="0.00" n>
                                </td>
                                <td>
                                    <label class="nowrap line-height-18">
                                        <input id="active"   class="inline-block ng-pristine ng-untouched ng-valid ng-not-empty" type="checkbox"> 启用
                                    </label>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 普通商品及积分商品 结束 -->
                <div class="form-group">
                    <label class="col-sm-2 control-label">视频展示</label>
                    <div class="col-sm-8">
                        <div class="row">
                            <div class="col-sm-10 padding-right-0">
                                <input style="border-right:none" name="goods_video" value="" class="layui-input" title="请输入链接或上传视频展示文件" placeholder="请输入链接或上传视频展示文件">
                            </div>
                            <div class="col-sm-2 padding-left-0">
                                <button data-file="one" data-type="mp4" data-field="goods_video" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传视频文件</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">展示描述</label>
                    <div class="col-sm-8">
                        <textarea class="layui-textarea" v-model="title" placeholder="请输入展示描述"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">商品内容</label>
                    <div class="col-sm-8">
                        <textarea name="content" id="content"></textarea></div>
                </div>
                <div class="hr-line-dashed"></div>

                <div class="col-sm-7 col-sm-offset-2">
                    <div class="layui-form-item text-center">
                        <button class="layui-btn" type="button" v-on:click="saveGoods">保存配置</button>
                        <button class="layui-btn layui-btn-danger" type="button" onclick="window.history.back()">取消编辑</button>
                    </div>
                </div>

            </form>

            <script>

                require(['jquery', 'ckeditor', 'vue'], function (jquery,ckeditor,Vue) {
                    function calcDescartes (array) {
                        if (array.length < 2) return array[0] || [];
                        return [].reduce.call(array, function (col, set) {
                            var res = [];
                            col.forEach(function (c) {
                                set.forEach(function (s) {
                                    var t = [].concat(Array.isArray(c) ? c : [c]);
                                    t.push(s);
                                    res.push(t);
                                })
                            });
                            return res;
                        });
                    }
                    // // 多图片上传处理
                    var vue=new Vue({
                        el: '#app',
                        data: {
                            name: '',
                            brands:[],
                            classifies:[],
                            columns:[],
                            brandId:"",
                            classifyId:"",
                            columnId:"",
                            specId:'',
                            specs:[],
                            options:[],
                            results:[],
                            title:'',
                            content:'',
                            thumbnail:'',
                            pics:''
                        },
                        created: function () {
                            this.brands=$.getBrand;
                            this.classifies=$.getClassify;
                            this.specs=$.getSpec;
                            this.columns=$.getColumns;
                        },
                        methods:{
                            saveGoods:function() {
                                var data = {};
                                data.thumbnail = $("input[name='thumbnail']").val();
                                data.pics = $("input[name='pics']").val();
                                data.brandId = this.brandId;
                                data.classifyId = this.classifyId;
                                data.specId = this.specId;
                                data.columnId=this.columnId;
                                data.name = this.name;
                                data.intro = this.title;
                                data.detail = CKEDITOR.instances.content.getData();
                                var resultDtoList = [];
                                for (var i = 0; i < this.results.length; i++) {
                                    var obj = {}
                                    obj.name = JSON.stringify(this.results[i].name);
                                    obj.salePrice = this.results[i].salePrice;
                                    obj.marketPrice = this.results[i].marketPrice;
                                    obj.active = this.results[i].choose ? 1 : 0;
                                    resultDtoList.push(obj);
                                }
                                if (this.specId == "") {
                                    var obj={}
                                    obj.name = "默认规格"
                                    obj.salePrice =$("#salePrice").val();
                                    obj.marketPrice = $("#marketPrice").val();;
                                    obj.active = $("#active").prop("checked")?1 : 0;
                                    resultDtoList.push(obj);
                                }
                                data.goodsSpecDtos=resultDtoList;
                                //筛选出用户选择的规格
                                var arra=this.options;
                                var specInfo=[];
                                for(var i=0;i<arra.length;i++) {
                                    var obj={};
                                    obj.name=arra[i].name;
                                    var values=arra[i].values;
                                    var attributes=[];
                                    for(var j=0;j<values.length;j++) {
                                        if(values[j].active) {
                                            attributes.push(values[j].name);
                                        }
                                    }
                                    obj.values=attributes;
                                    specInfo.push(obj);
                                }
                                data.specInfo=JSON.stringify(specInfo);//[name："颜色"：""]
                                if($("#goodsForm").valid()) {
                                    $.ajax({
                                        type : "POST",
                                        url : $("#goodsForm").attr("action"),
                                        data :JSON.stringify(data),
                                        dataType : "json",
                                        contentType:"application/json",
                                        success : function(res) {
                                            if(res.errorCode=="0")
                                            {
                                                $.msg.success(res.msg);
                                            }
                                            else
                                            {
                                                $.msg.error(res.msg);
                                            }
                                        }
                                    });
                                }
                            },
                            getSpec:function (id) {
                                var specInfo=this.specs.filter(function (spec) {
                                    return spec.id == id;
                                });
                                if(specInfo.length>0)
                                {
                                    this.options = specInfo[0].specOptions;
                                }
                            },
                            selectName:function () {
                                var sets=[];
                                var arra=this.options;
                                //筛选出用户选中的规格
                                for(var i=0;i<arra.length;i++) {
                                    var values=arra[i].values;
                                    var attributes=[];
                                    for(var j=0;j<values.length;j++) {
                                        if(values[j].active) {
                                            attributes.push(values[j].name);
                                        }
                                    }
                                    sets.push(attributes);
                                }
                                var combination=calcDescartes(sets);
                                var results=[];
                                for (var i = 0; i < combination.length; i++) {
                                    var obj={};
                                    obj.name=combination[i];
                                    obj.marketPrice="";
                                    obj.salePrice="";
                                    obj.choose=false;
                                    results.push(obj);
                                }
                                this.results=results;
                            }
                        }
                    })
                    CKEDITOR.replace('content', {
                    });
                    $('#app input[name="thumbnail"]').uploadOneImage();
                    $('#app input[name="pics"]').uploadMultipleImage();
                    $("#goodsForm").validate();
                });
            </script>
        </div>
    </div>